<template>
  <div v-if="datalist" style="background:#f5f5f5;margin-top:95px">
    <div class="hots">
      <div class="split-line">
        <span class="line"></span>
        <span class="square"></span>
        <span class="text">{{datalist.categoriesTitle}}</span>
        <span class="square"></span>
        <span class="line"></span>
      </div>
      <van-grid :border="false" :column-num="4" icon-size="42px">
        <van-grid-item
          :icon="item.imageUrl"
          :text="item.title"
          v-for="item in datalist.categories"
          :key="item.id"
          @click="handleTo(item.url)"
        />
      </van-grid>
    </div>
    <div class="split-line">
        <span class="line"></span>
        <span class="square"></span>
        <span class="text">大家都在逛</span>
        <span class="square"></span>
        <span class="line"></span>
    </div>
    <ul>
      <list
        v-for="data in datalist.items.list"
        :key="data.id"
        :data="data"
        @click.native="handleClick(data)"
      ></list>
    </ul>
     <vueToTop type=7 right=10 bottom=80 size=36 color="#fff" class="totop" top=800></vueToTop>
  </div>
</template>
<script>
import axios from 'axios'
import Vue from 'vue'
import { Grid, GridItem } from 'vant'
import list from '@/views/category/list'
Vue.use(Grid)
Vue.use(GridItem)

export default {
  data () {
    return {
      datalist: null,
      scrollHeight: '0px',
      loaddata: 0,
      loadstatus: true
    }
  },
  components: {
    list
  },

  mounted () {
    axios.get(`http://www.xiongmaoyouxuan.com/api/tab/${this.$route.params.id}?start=0`)
      .then(res => {
        this.datalist = res.data.data
      })
    window.addEventListener('scroll', this.loadmore)
  },

  methods: {
    // 跳转详情页
    handleClick (data) {
      if (data.type === 1) {
        this.$router.push(`/c/${data.id}`)
      } else {
        var id = data.url.split('=')[1]
        this.$router.push(`/column/${id}`)
      }
    },
    // 跳转hotlist页面(潮流精选点击后页面)
    handleTo (id) {
      id = id.split('=')[1]
      this.$router.push(`/category/${id}`)
    },
    async loadmore () { // 滚动加载更多
      var height = document.documentElement.scrollTop + document.documentElement.clientHeight -
      document.documentElement.scrollHeight
      if (height >= -50 && this.loadstatus && height !== 0) {
        this.loadstatus = false
        this.loaddata += 20
        await axios.get(`http://www.xiongmaoyouxuan.com/api/tab/${this.$route.params.id}/feeds?start=${this.loaddata}&sort=0`).then(res => {
          this.datalist.items.list = this.datalist.items.list.concat(res.data.data.list)
          this.$nextTick(() => {
            this.loadstatus = true
          })
        })
      }
    }
  },

  destroyed () {
    window.removeEventListener('scroll', this.loadmore)
  }

}
</script>
<style lang="scss" scoped>
.totop{
  border-radius: 50%;
  background: #2bb8f2;
  opacity: .8;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.hots{
  background: #fff;
}
.split-line {
  text-align: center;
  font-size: 12px;
  color: #666;
  padding: 10px;
  .line {
    height: 1px;
    background-color: #fdde4a;
    width: 12%;
    display: inline-block;
    margin-bottom: 3px;
  }
  .square {
    content: "";
    width: 0;
    height: 0;
    border: 3px solid #fdde4a;
    transform: rotate(45deg);
    display: inline-block;
    box-sizing: border-box;
    margin-top: -3px;
  }
  .text{
    padding: 10px;
  }
}
</style>
